<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>穿梭框</title>

  <link rel="stylesheet" href="../src/css/layui.css">
  <style>
    body{padding-left: 200px; padding-top: 30px;}
    #text1,#text2{padding-top: 80px;}
  </style>
</head>
<body>

<button id="btn" class="layui-btn">获取右侧值</button>
  
<div id="text1"></div>

<div id="text2"></div>

<div id="text3"></div>


<script src="../src/layui.js"></script>
<script>
  layui.use('transfer', function(){
    var transfer = layui.transfer
    ,$ = layui.$;

    var ins1 = transfer.render({
      elem: '#text1'
      ,parseData: function(res){
        return {
          "value": res.status
          ,"title": res.label
          ,"disabled": res.check
        }
      }
      ,data: [{"status": "1", "label": "瓦罐汤", "check": false}
        ,{"status": "2", "label": "油酥饼", "check": false}
        ,{"status": "3", "label": "炸酱面", "check": false}
        ,{"status": "4", "label": "串串香", "check": true}
        ,{"status": "5", "label": "豆腐脑", "check": false}
        ,{"status": "6", "label": "驴打滚", "check": false}]
      ,value: ["1", "5"]
      ,showSearch: true
    });
    
    $("#btn").on('click', function(){
      alert(JSON.stringify(ins1.getValue()))
    });

    var ins2 = transfer.render({
      elem: '#text2'
      ,onchange: function(obj){
        console.log(obj)
      }
      ,data: [{"value": "1", "title": "瓦罐汤", "disabled": false}
        ,{"value": "2", "title": "油酥饼", "disabled": false}
        ,{"value": "3", "title": "炸酱面", "disabled": false}
        ,{"value": "4", "title": "串串香", "disabled": true}
        ,{"value": "5", "title": "豆腐脑", "disabled": false}
        ,{"value": "6", "title": "驴打滚", "disabled": false}
        ,{"value": "7", "title": "北京烤鸭", "disabled": false}
        ,{"value": "8", "title": "烤冷面", "disabled": false}
        ,{"value": "9", "title": "毛血旺", "disabled": true}
        ,{"value": "10", "title": "肉夹馍", "disabled": false}
        ,{"value": "11", "title": "臊子面", "disabled": false}
        ,{"value": "12", "title": "凉皮", "disabled": false}
        ,{"value": "13", "title": "羊肉泡馍", "disabled": false}
        ,{"value": "14", "title": "冰糖葫芦", "disabled": true}
        ,{"value": "15", "title": "狼牙土豆", "disabled": false}]
      ,value: ["1", "3", "5", "7", "9", "11"]
    });
  });
</script>

</body>
</html>